
<template>
  <div>
    <el-card class="box-card">
      <el-breadcrumb separator="/" style="margin-bottom: 20px">
        <!-- <el-breadcrumb-item>会议管理 </el-breadcrumb-item> -->
        <el-breadcrumb-item :to="{ path: '/welcome/log' }"
          >日志</el-breadcrumb-item
        >
      </el-breadcrumb>
      <template>
        <el-row :gutter="20">
          <el-col :span="2"> 发起时间</el-col>
          <el-col :span="4">
            
          <el-date-picker
              v-model="log.loginlogDate"
              type="datetimerange"
              align="right"
              start-placeholder="发起时间"
              end-placeholder="结束日期"
              :default-time="['12:00:00', '08:00:00']"
            >
            </el-date-picker>
          </el-col>
          
        
          <el-col :span="4"> 搜索</el-col>
          <el-col :span="17">
            <el-button
              type="primary"
              icon="el-icon-search"
              style="display: inline"
              @click="search"
              >搜索</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-search"
              style="display: inline"
              @click="exportData"
              >导出</el-button
            > 
          
          </el-col>
          
        </el-row>
      </template>
      <el-table border :data="tableData" style="width: 100%; margin-top: 20px">
        <el-table-column prop="loginlogId" label="登录日志Id"></el-table-column>
        <el-table-column prop="loginlogUsrName" label="操作者"></el-table-column>
        <el-table-column prop="loginlogDate" label="登录时间"></el-table-column> 
        <el-table-column prop="loginlogDescribe" label="描述"></el-table-column>
        <el-table-column label="成功还是失败">

        <template slot-scope="scope">
            <span v-if="scope.row.loginLogSof === 0">失败</span>
            <span v-if="scope.row.loginLogSof === 1">成功</span>
        
          </template>
        </el-table-column>
    
      </el-table>
      <template>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageIndex"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="params.total"
        >
        </el-pagination>
      </template>
    </el-card>
  </div>
</template>
    <script>
export default {
  data() {
    return {
      tableData: [],
      params: {
        pageSize: 5, // 每页显示5条记录
        pageIndex: 1, // 当前第几页
        total: 0, // 共几条记录去分页
      },
      log: {
        /**
         * 登录日志id
         */

        loginlogId: "",

        /**
         * 操作者
         */
        loginlogUsrid: 0,

        /**
         * 登录时间
         */
        loginlogDate: "",

        /**
         * 描述
         */
        loginlogDescribe: "",

        /**
         * 成功还是失败
         */
        loginLogSof: 0,
        //操作者Name
        loginlogUsrName:"",
      },
    };
  },
  computed: {},
  // mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  mounted() {
    this.search();
  },
  methods: {
     // 导出数据
     exportData() {
      // 1.定义表头对应关系
      const headers = {
        '登录日志id': 'loginlogId',
        '操作者': 'loginlogUsrid',
        '登录时间': 'loginlogDate',
        '描述': 'loginlogDescribe',
        '成功还是失败': 'loginLogSof',
        '操作者Name': 'loginlogUsrName',
       
      }
      // 懒加载
      import('@/excel/Export2Excel').then(async excel => {
        // excel是引入文件（也就是@/ventor/Export2Excel）的导出对象
        // 获取所有的数据
        const  rows  =this.tableData;
        // console.log(rows);
    
        const data = this.formatJson(headers, rows) // 返回的data就是我们转化后的数据
        excel.export_json_to_excel({
          // 要求转出的表头是中文
          header: Object.keys(headers), // 表头 必填
          data, // //具体数据 必填
          filename: '日志excel', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
        // 拿到的数据是这种
        //  [{ username: 'xxx', mobile: 'xxx', ... }, { username: 'xxx', mobile: 'xxx', ... }]
        // 要转化的是如下这种
        // header: ['姓名', '手机号', '入职日期', ...]
        // data: [['张三', '138xxxxxxxx', '1992-08-04', ...], ['李四', '135xxxxxxxx', '1992-08-04', ...]]
      })
    },
    formatJson(headers, rows) {
      return rows.map(item => {
        // console.log(item)
        return Object.keys(headers).map(k => {
          if (headers[k] === 'timeOfEntry' || headers[k] === 'correctionTime') {
            return formatDate(item[headers[k]]) // 返回格式化之前的时间
          } else if (headers[k] === 'formOfEmployment') {
            return EmployeeEnum.hireType[item.formOfEmployment] ? EmployeeEnum.hireType[item.formOfEmployment] : '未知'
          }
          return item[headers[k]]
        })
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pageSize = val;
      this.search();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.pageIndex = val;
      this.search();
    },
    async search() {
      const url = "/vueboot/loginLog/page";
      const { data: res } = await this.$ajax.get(url, {
        params: {
          pageIndex: this.params.pageIndex,
          limit: this.params.pageSize,
          loginlogDate:this.log.loginlogDate[0],
          loginlogDate1:this.log.loginlogDate[1]
        },
        headers: {
          token: localStorage.getItem("token"),
        },
      });
      console.log(res);
      this.tableData = res.data.records;
      this.params.total = res.data.total;
    },
    towerChange(e) {
      //获取的值和id
      console.log(e);
      this.sysUser.id = e;
    },

    showAddDialog() {
      this.addDialogVisible = true;
    },
  },
};
</script>
    <style>
.breadcrumb {
  height: 30px;
}
</style>
    